<template>
  <div>
    <el-form class="mt10" :rules="rules" :model="registerForm">
      <el-form-item prop="username">
        <el-input
          ref="username"
          v-model="registerForm.username"
          placeholder="手机号"
          name="username"
          type="text"
          tabindex="1"
          autocomplete="on"
        />
      </el-form-item>
      <el-form-item prop="validate">
        <el-input
          ref="username"
          v-model="registerForm.validate"
          placeholder="验证码"
          name="username"
          type="text"
          tabindex="1"
          autocomplete="on"
        />
        <el-link type="info" :underline="false" class="sms-code">获取验证码</el-link>
      </el-form-item>
      <el-form-item prop="type">
        <el-select v-model="registerForm.type" placeholder="用户类型" style="width:100%">
          <el-option value="1" label="生产者">生产者</el-option>
          <el-option value="2" label="检查者">检查者</el-option>
          <el-option value="3" label="收购者">收购者</el-option>
          <el-option value="4" label="消费者">消费者</el-option>
        </el-select>
      </el-form-item>
      <el-button style="width: 100%" type="primary">注册</el-button>
    </el-form>
    <p class="mt20">
      <el-link type="primary" @click="back">返回登录</el-link>
    </p>
  </div>
</template>
<script>
export default {
  data () {
    return {
      rules: {
        username: [
          { required: true, trigger: 'blur', message: '请输入手机号' }
        ],
        validate: [
          { required: true, trigger: 'blur', message: '请输入密码' }
        ],
        type: [
          { required: true, trigger: 'change', message: '请输入用户类型' }
        ]
      },
      registerForm: {
        username: '',
        validate: ''
      }
    }
  },
  methods: {
    back () {
      this.$emit('handle-back', 'register')
    }
  }
}
</script>
